<template>
	<view class="product-detail-container">


		<!-- 主要内容区域 -->
		<scroll-view 
			class="main-content" 
			scroll-y="true"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 商品图片轮播 -->
			<view class="product-gallery">
				<swiper 
					class="gallery-swiper" 
					:indicator-dots="true" 
					:autoplay="true"
					:interval="3000"
					:circular="true"
					indicator-color="rgba(255, 255, 255, 0.5)"
					indicator-active-color="#FFFFFF"
					@change="onImageChange"
				>
					<swiper-item v-for="(image, index) in productImages" :key="index">
						<image 
							class="product-image" 
							:src="image" 
							mode="aspectFit"
							@click="previewImages"
						/>
					</swiper-item>
				</swiper>
				<view class="image-indicator">
					<text class="indicator-text">{{ currentImageIndex + 1 }}/{{ productImages.length }}</text>
				</view>
			</view>
			
			<!-- 商品基本信息 -->
			<view class="product-info">
				<view class="price-section">
					<view class="price-row">
						<text class="price-symbol">¥</text>
						<text class="current-price">{{ selectedSpec ? selectedSpec.price : (productInfo.price || 0) }}</text>
						<!-- <text v-if="productInfo.originalPrice && productInfo.originalPrice > productInfo.price" class="original-price">
							¥{{ productInfo.originalPrice }}
						</text> -->
						<view v-if="productInfo.salesCount" class="share-count">
							<text class="share-text">已售{{ productInfo.salesCount }}件</text>
						</view>
					</view>
				</view>
				
				<view class="title-section">
					<text class="product-title">{{ productInfo.name || '商品名称' }}</text>
				</view>
			</view>
			
			<!-- 可选择显示的商品参数 -->
			<view v-if="showParams" class="product-params">
				<view class="param-title">
					<text class="title-text">参数</text>
					<text class="param-detail-btn" @click="showParamDetail">查看详情 ></text>
				</view>
				<view class="param-grid">
					<view 
						v-for="param in (displayParams.length > 0 ? displayParams.slice(0, 4) : defaultParams.slice(0, 4))" 
						:key="param.description" 
						class="param-tag"
					>
						<text class="param-label">{{ param.description }}</text>
						<text class="param-value">{{ param.value }}</text>
					</view>
				</view>
			</view>
			
			<!-- 新增的规格选择区域 -->
			<view v-if="showSpecs" class="spec-section">
				<view class="spec-row">
					<text class="spec-label">规格</text>
					<view class="spec-selected-container">
						<view v-if="getSelectedSpecText()" class="selected-specs">
							<text class="specs-text">{{ getSelectedSpecText() }}</text>
							<text v-if="Object.keys(selectedSpecsData).length > 1" class="specs-more">+{{ Object.keys(selectedSpecsData).length - 1 }}项</text>
							<!-- 悬停显示完整内容 -->
							<view class="specs-tooltip">
								<text class="tooltip-text">{{ getSelectedSpecFullText() }}</text>
							</view>
						</view>
						<text v-else class="spec-placeholder" @click="showSpecDetail">请选择规格</text>
						<text class="spec-arrow" @click="showSpecDetail">></text>
					</view>
				</view>
			</view>
			
			<!-- 可选择显示的售后保障 -->
			<view v-if="showAfterSale" class="service-section">
				<view class="service-row">
					<text class="service-label">售后保障</text>
					<text class="service-selected" @click="showAfterSaleDetail">
						{{ selectedAfterSaleName || '5天无理由退货' }} >
					</text>
				</view>
			</view>
			
			<!-- 售后与评价间隔 -->
			<view v-if="showAfterSale" class="section-divider"></view>
			
			<!-- 买家评价 -->
			<view class="buyer-evaluation">
				<view class="evaluation-header">
					<text class="evaluation-label">买家评价</text>
					<text class="evaluation-more" @click="goToReviews">查看更多 ></text>
				</view>
				
				<!-- 显示前3条评价 -->
				<view v-if="productReviews.length > 0" class="review-list">
					<view 
						v-for="(review, index) in productReviews.slice(0, 3)" 
						:key="index" 
						class="review-item"
					>
						<view class="review-header">
							<image 
								class="user-avatar" 
								:src="getUserAvatar(review)" 
								mode="aspectFill"
							/>
							<view class="review-info">
								<text class="user-name">{{ getUserNickname(review) }}</text>
								<view class="review-rating">
									<text 
										v-for="star in 5" 
										:key="star" 
										class="star"
										:class="{ 'active': star <= (review.scoreStar || 5) }"
									>★</text>
								</view>
								<text class="review-spec" v-if="review.productSpec">{{ review.productSpec }}</text>
							</view>
							<text class="review-date">{{ formatDate(review.reviewTime) }}</text>
						</view>
						
						<!-- 评价内容和图片布局 -->
						<view class="review-content-container">
							<text class="review-content">{{ review.content || '用户未填写评价内容' }}</text>
							<!-- 图片显示在右侧（仅第一张） -->
							<view v-if="review.reviewImages && review.reviewImages.length > 0" class="review-images-thumb">
								<view class="thumb-wrapper" @click="previewReviewImages(getReviewImagesUrls(review.reviewImages), 0)">
									<image 
										class="review-thumb-image" 
										:src="getReviewImageUrl(review.reviewImages[0])" 
										mode="aspectFill"
									/>
									<!-- 多图数量指示器 -->
									<view v-if="review.reviewImages.length > 1" class="thumb-count-badge">
										<text class="count-text">{{ review.reviewImages.length }}</text>
									</view>
								</view>
							</view>
						</view>
						
						<!-- 商家回复 -->
						<view v-if="review.merchantReply" class="merchant-reply">
							<view class="reply-header">
								<text class="reply-label">商家回复：</text>
							</view>
							<text class="reply-content">{{ review.merchantReply }}</text>
						</view>
					</view>
				</view>
				
				<!-- 默认评价（如果没有API数据） -->
				<view v-else class="review-list">
					<view class="review-item">
						<view class="review-header">
							<image 
								class="user-avatar" 
								src="/static/images/default-avatar.png" 
								mode="aspectFill"
							/>
							<view class="review-info">
								<text class="user-name">匿名用户</text>
								<view class="review-rating">
									<text 
										v-for="star in 5" 
										:key="star" 
										class="star active"
									>★</text>
								</view>
							</view>
							<text class="review-date">2025-01-01</text>
						</view>
						<view class="review-content-container">
							<text class="review-content">超99%买家觉得质量不错，使用体验良好</text>
						</view>
					</view>
					
					<view class="review-item">
						<view class="review-header">
							<image 
								class="user-avatar" 
								src="/static/images/default-avatar.png" 
								mode="aspectFill"
							/>
							<view class="review-info">
								<text class="user-name">满意用户</text>
								<view class="review-rating">
									<text 
										v-for="star in 4" 
										:key="star" 
										class="star active"
									>★</text>
									<text class="star">★</text>
								</view>
							</view>
							<text class="review-date">2024-12-28</text>
						</view>
						<view class="review-content-container">
							<text class="review-content">产品符合预期，性价比不错，发货速度很快</text>
						</view>
					</view>
					
					<view class="review-item">
						<view class="review-header">
							<image 
								class="user-avatar" 
								src="/static/images/default-avatar.png" 
								mode="aspectFill"
							/>
							<view class="review-info">
								<text class="user-name">认证买家</text>
								<view class="review-rating">
									<text 
										v-for="star in 5" 
										:key="star" 
										class="star active"
									>★</text>
								</view>
							</view>
							<text class="review-date">2024-12-25</text>
						</view>
						<view class="review-content-container">
							<text class="review-content">包装精美，商品质量优秀，客服态度好，推荐购买</text>
						</view>
					</view>
				</view>
			</view>

			
			<!-- 为您推荐商品 -->
			<view class="recommend-section">
				<view class="recommend-title">
					<text class="title-text">为您推荐</text>
				</view>
				

				
				<view class="recommend-grid">
					<view 
						v-for="(item, index) in recommendProducts" 
						:key="index" 
						class="recommend-item"
						@click="goToProductDetail(item.id)"
					>
						<view class="recommend-image-wrapper">
							<image 
								class="recommend-image" 
								:src="getProductImageForBackground(item.pic)" 
								mode="aspectFill"
								@error="onRecommendImageError"
								@load="onRecommendImageLoad"
							/>
						</view>
						<view class="recommend-info">
							<text class="recommend-name">{{ item.name || '商品名称' }}</text>
							<text class="recommend-price">{{ formatPrice(item.price) }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 商品介绍 -->
			<view v-if="detailImages.length > 0" class="product-details">
				<view class="section-title">
					<text class="title-text">商品介绍</text>
				</view>
				<view class="detail-content">
					<!-- 只显示pic2中的详情图片 -->
					<view class="detail-images">
						<image 
							v-for="(img, index) in detailImages" 
							:key="index"
							class="detail-image" 
							:src="img" 
							mode="widthFix"
							@error="onDetailImageError"
						/>
					</view>
				</view>
			</view>
			
			<!-- 底部安全区域 -->
			<view class="bottom-safe-area" :style="{ height: safeAreaInsetBottom + 80 + 'px' }"></view>
		</scroll-view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-actions" :style="{ paddingBottom: safeAreaInsetBottom + 'px' }">
			<view class="action-left">
				<view class="favorite-btn" :class="{ 'favorited': isFavorited }" @click="toggleFavorite">
					<text class="btn-icon">{{ isFavorited ? '♥' : '♡' }}</text>
					<text class="btn-text">收藏</text>
				</view>
				<view class="cart-btn" @click="goToCart">
					<text class="btn-icon">🛒</text>
					<text class="btn-text" style="display: inline-block; width: auto; min-width: 40px;">购物车</text>
				</view>
			</view>
			
			<button class="add-cart-btn" @click="showAddToCartModal">
				<text class="btn-text">加入购物车</text>
			</button>
		</view>
		
		<!-- 参数详情弹窗 -->
		<view v-if="showParamModal" class="param-modal-overlay" @click="closeParamModal">
			<view class="param-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">商品参数</text>
					<text class="modal-close" @click="closeParamModal">×</text>
				</view>
				
				<view class="modal-content">
					<!-- 显示参数详情 -->
					<view v-if="productParams.length > 0" class="param-detail-section">
						<view v-for="param in productParams" :key="param.description" class="param-detail-item">
							<view class="param-detail-row">
								<text class="param-detail-label">{{ param.description }}</text>
								<text class="param-detail-value">{{ param.value }}</text>
							</view>
						</view>
					</view>
					
					<!-- 如果没有参数数据，显示默认信息 -->
					<view v-else class="param-detail-section">
						<view class="param-detail-item">
							<view class="param-detail-row">
								<text class="param-detail-label">产地</text>
								<text class="param-detail-value">长白山</text>
							</view>
						</view>
						<view class="param-detail-item">
							<view class="param-detail-row">
								<text class="param-detail-label">重量</text>
								<text class="param-detail-value">500g</text>
							</view>
						</view>
						<view class="param-detail-item">
							<view class="param-detail-row">
								<text class="param-detail-label">保质期</text>
								<text class="param-detail-value">6个月</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="modal-footer">
					<button class="confirm-btn" @click="closeParamModal">确定</button>
				</view>
			</view>
		</view>
		
		<!-- 规格选择弹窗 -->
		<view v-if="showSpecModal" class="param-modal-overlay" @click="closeSpecModal">
			<view class="param-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">选择规格</text>
					<text class="modal-close" @click="closeSpecModal">×</text>
				</view>
				
				<view class="modal-content">
					<!-- 规格选择 -->
					<view v-if="productSpecs.length > 0" class="spec-selection-section">
						<view v-for="spec in productSpecs" :key="spec.name" class="spec-group">
							<view class="spec-group-header">
								<text class="spec-group-name">{{ spec.name }}</text>
								<text class="spec-group-selected">{{ getSelectedSpecValueName(spec.name) || '未选择' }}</text>
							</view>
							<view class="spec-options-container">
								<view 
									v-for="option in spec.specValues" 
									:key="option.valueId" 
									class="spec-option-item"
									:class="{ 
										'selected': tempSelectedSpecs[spec.name] === option.valueId,
										'out-of-stock': option.stock === 0
									}"
									@click="selectSpecOption(spec.name, option)"
								>
									<view class="option-content">
										<text class="option-name">{{ option.name.replace('\n', ' ') }}</text>
										<text v-if="option.priceDiff && option.priceDiff !== 0" class="option-price">
											{{ option.priceDiff > 0 ? '+' : '' }}¥{{ option.priceDiff }}
										</text>
									</view>
									<text v-if="option.stock === 0" class="stock-tip">缺货</text>
									<view v-if="tempSelectedSpecs[spec.name] === option.valueId" class="option-check">
										<text class="check-icon">✓</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 如果没有规格数据，显示默认信息 -->
					<view v-else class="spec-selection-section">
						<view class="no-specs-message">
							<view class="no-specs-icon">📦</view>
							<text class="no-specs-text">该商品暂无可选规格</text>
							<text class="no-specs-desc">商品为标准规格，无需选择</text>
						</view>
					</view>
				</view>
				
				<view class="modal-footer">
					<view class="cart-buttons">
						<button 
							class="cart-btn personal-cart-btn" 
							:class="{ 'disabled': !isSpecSelectionComplete() }"
							@click="addToPersonalCart"
						>
							加入个人购物车
						</button>
						<button 
							class="cart-btn ship-cart-btn" 
							:class="{ 'disabled': !isSpecSelectionComplete() }"
							@click="addToShipCart"
						>
							加入船舶购物车
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 售后保障选择弹窗 -->
		<view v-if="showAfterSaleModal" class="param-modal-overlay" @click="closeAfterSaleModal">
			<view class="param-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">选择售后保障</text>
					<text class="modal-close" @click="closeAfterSaleModal">×</text>
				</view>
				
				<view class="modal-content">
					<!-- 售后保障选择 -->
					<view v-if="afterSaleOptions.length > 0" class="after-sale-selection-section">
						<view 
							v-for="(option, index) in afterSaleOptions" 
							:key="option.id || index" 
							class="after-sale-option"
							:class="{ 'selected': tempSelectedAfterSale && tempSelectedAfterSale.id === option.id }"
							@click="selectAfterSaleOption(option)"
						>
							<view class="option-content">
								<view class="option-header">
									<text class="option-name">{{ option.name || option.title }}</text>
									<view class="option-check" :class="{ 'checked': tempSelectedAfterSale && tempSelectedAfterSale.id === option.id }">
										<text class="check-icon" v-if="tempSelectedAfterSale && tempSelectedAfterSale.id === option.id">✓</text>
									</view>
								</view>
								<text class="option-description">{{ option.description || option.desc }}</text>
							</view>
						</view>
					</view>
					
					<!-- 如果没有售后保障数据，显示默认信息 -->
					<view v-else class="after-sale-selection-section">
						<view class="no-options-message">
							<view class="no-options-icon">🛡️</view>
							<text class="no-options-text">暂无售后保障选项</text>
							<text class="no-options-desc">请联系客服了解详情</text>
						</view>
					</view>
				</view>
				
				<view class="modal-footer">
					<button class="confirm-btn" @click="confirmAfterSaleSelection">确定</button>
				</view>
			</view>
		</view>
		
		<!-- 船舶选择弹窗 -->
		<view v-if="showShipModal" class="param-modal-overlay" @click="showShipModal = false">
			<view class="param-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">选择船舶</text>
					<text class="modal-close" @click="showShipModal = false">×</text>
				</view>
				
				<view class="modal-content">
					<!-- 船舶列表 -->
					<view v-if="shipList.length > 0" class="ship-list">
						<!-- 船舶公司列表 -->
						<view 
							v-for="company in shipList" 
							:key="company.companyId"
							class="company-option"
						>
							<!-- 公司信息 -->
							<view class="company-header" @click="toggleCompany(company)">
								<view class="company-info">
									<text class="company-name">{{ company.name }}</text>
									<text class="company-ships-count">{{ company.ships ? company.ships.length : 0 }}艘船舶</text>
								</view>
								<text class="company-toggle">{{ company.selected ? '▼' : '▶' }}</text>
							</view>
							
							<!-- 该公司下的船舶列表 -->
							<view v-if="company.selected && company.ships && company.ships.length > 0" class="ships-container">
								<view 
									v-for="ship in company.ships" 
									:key="ship.shipId"
									class="ship-option"
									:class="{ active: selectedShip.shipId === ship.shipId }"
									@click="selectShip(ship)"
								>
									<view class="ship-info">
										<text class="ship-name">{{ ship.shipName }}</text>
										<text class="ship-imo">IMO: {{ ship.imoCode }}</text>
									</view>
									<text v-if="selectedShip.shipId === ship.shipId" class="ship-check">✓</text>
								</view>
							</view>
							
							<!-- 该公司下没有船舶 -->
							<view v-else-if="company.selected && (!company.ships || company.ships.length === 0)" class="no-ships-message">
								<text class="no-ships-text">该公司暂无船舶信息</text>
							</view>
						</view>
					</view>
					
					<!-- 如果没有船舶数据，显示默认信息 -->
					<view v-else class="ship-list">
						<view class="no-ship-message">
							<view class="no-ship-icon">🚢</view>
							<text class="no-ship-text">暂无船舶信息</text>
							<text class="no-ship-desc">请先添加船舶信息</text>
						</view>
					</view>
				</view>
				
				<!-- 移除添加新船舶按钮 -->
			</view>
		</view>
		
		<!-- 加载组件 -->
		<ob-loading :visible="isLoading" text="加载中..." />
	</view>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getPlatform, formatDate } from '../../utils/common.js'
import productApi from '../../api/product.js'
import cartApi from '../../api/cart.js'
import { resolveAvatarUrl } from '../../utils/avatar.js'
import favoriteApi from '../../api/favorite.js'
import shipApi from '../../api/ship.js'

// 全局状态
const store = inject('$store')

// 响应式数据
const productInfo = ref({})
const productImages = ref([])
const detailImages = ref([]) // 商品详情图片
const currentImageIndex = ref(0)
const selectedSpecs = ref({})
const selectedSpec = ref(null)
const quantity = ref(1)
const reviews = ref([])
const isLoading = ref(false)
const isRefreshing = ref(false)
const isFavorited = ref(false)
const isCheckingFavorite = ref(false) // 防止重复检查收藏状态
const recommendProducts = ref([]) // 推荐商品
const productReviews = ref([]) // 商品评价
const afterSaleInfo = ref({}) // 售后保障信息
const afterSaleOptions = ref([]) // 售后保障选项列表
const selectedAfterSale = ref({}) // 已选中的售后保障
const selectedAfterSaleName = ref('') // 已选中的售后保障名称（显示在主页面）
const tempSelectedAfterSale = ref({}) // 临时选中的售后保障（在弹窗中）

// 控制可选显示区域的状态
const showParams = ref(true) // 控制参数显示
const showSpecs = ref(true) // 控制规格显示
const showAfterSale = ref(true) // 控制售后保障显示

// 参数相关状态
const showParamModal = ref(false) // 控制参数详情弹窗显示
const productParams = ref([]) // 商品参数列表（description和value）
const displayParams = ref([]) // 在主页面显示的参数

// 默认参数数据
const defaultParams = computed(() => [
	{ description: '库存', value: `${productInfo.value.stock || 0}件` },
	...(productInfo.value.avgScore ? [{ description: '评分', value: `${productInfo.value.avgScore}分` }] : []),
	{ description: '保质期', value: '8个月' }
])

// 规格相关状态
const showSpecModal = ref(false) // 控制规格选择弹窗显示
const productSpecs = ref([]) // 商品规格列表（name和specValues）
const tempSelectedSpecs = ref({}) // 临时选中的规格（在弹窗中）
const tempSelectedSpecsData = ref({}) // 临时选中的规格完整数据
const selectedSpecsData = ref({}) // 已确认选中的规格完整数据

// 船舶相关状态
const showShipModal = ref(false) // 控制船舶选择弹窗显示
const shipList = ref([]) // 船舶列表
const selectedShip = ref({}) // 已选中的船舶

// 售后保障相关状态
const showAfterSaleModal = ref(false) // 控制售后保障选择弹窗显示

// 获取已选中售后保障文本的计算属性
const getSelectedAfterSaleText = () => {
	if (selectedAfterSale.value && selectedAfterSale.value.name) {
		return selectedAfterSale.value.name
	}
	return '请选择售后保障'
}

// 获取系统信息
const platform = getPlatform()
const safeAreaInsetBottom = platform.safeAreaInsetBottom || 0

// 计算属性
const selectedPort = computed(() => store.selectedPort)
const cartCount = computed(() => store.state.cartCount || 0)

const maxQuantity = computed(() => {
	return selectedSpec.value ? selectedSpec.value.stock : (productInfo.value.stock || 0)
})

// 页面加载
onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options
	
	console.log('商品详情页面参数:', options)
	
	// 支持多种参数名称：productId 或 id
	const productId = options.productId || options.id
	
	if (productId) {
		console.log('获取到商品ID:', productId)
		loadProductDetail(productId)
	} else {
		console.error('未获取到商品ID参数')
		uni.showToast({
			title: '商品信息获取失败',
			icon: 'none'
		})
	}
})

// 页面显示时重新加载数据（解决从推荐商品跳转时评论不更新的问题）
onShow(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options

	// 支持多种参数名称：productId 或 id
	const productId = options.productId || options.id

	if (productId) {
		// 检查是否是新的商品ID，如果是则重新加载数据
		const currentProductId = productInfo.value.id
		const newProductId = parseInt(productId)

		// 只有当商品ID真正不同且不为空时才重新加载
		if (currentProductId !== newProductId && newProductId && !isLoading.value) {
			console.log('检测到新的商品ID，重新加载数据:', newProductId)
			// 清空旧数据
			productReviews.value = []
			recommendProducts.value = []
			productInfo.value = {}
			productImages.value = []
			detailImages.value = []
			// 重新加载新商品数据
			loadProductDetail(newProductId)
		}
	}
})

// 加载商品详情
const loadProductDetail = async (productId) => {
	try {
		isLoading.value = true
		console.log('开始加载商品详情, productId:', productId, 'type:', typeof productId)
		
		// 确保productId是数字类型
		const numericProductId = parseInt(productId)
		if (isNaN(numericProductId)) {
			throw new Error('商品ID格式不正确')
		}
		
		// 此处我们可以先使用一个测试ID（如果存在的话）
		console.log('将要请求的商品ID:', numericProductId)
		
		// 进行临时测试 - 使用固定ID来验证API是否正常
		// const testProductId = 1  // 如果数据库中有ID为1的商品，可以使用这个测试
		// console.log('使用测试商品ID:', testProductId)
		
		// 调用API获取商品详情
		const productResponse = await productApi.getProductDetail(numericProductId)
		console.log('商品详情API响应:', productResponse)
		console.log('API响应类型:', typeof productResponse)
		console.log('API响应是否为null:', productResponse === null)
		
		// 检查响应数据有效性
		if (!productResponse) {
			console.error('商品详情API返回null或undefined')
			throw new Error('商品不存在或已下架')
		}
		
		// 检查是否为空对象
		if (typeof productResponse === 'object' && Object.keys(productResponse).length === 0) {
			console.error('商品详情API返回空对象')
			throw new Error('商品信息不存在')
		}
		
		// 记录关键字段
		console.log('API响应数据结构:', {
			productId: productResponse.productId,
			id: productResponse.id,
			name: productResponse.name,
			price: productResponse.price,
			pic: productResponse.pic,
			pic2: productResponse.pic2,
			allKeys: Object.keys(productResponse)
		})
		
		// 处理成功的API响应
		// 设置商品基本信息
		productInfo.value = {
			id: productResponse.productId || productResponse.id || numericProductId,
			name: productResponse.name || productResponse.productName || '商品名称',
			price: productResponse.price || 0,
			originalPrice: productResponse.originalPrice || productResponse.oldPrice,
			stock: productResponse.stock || productResponse.inventory || 0,
			salesCount: productResponse.salesCount || productResponse.soldCount || 0,
			avgScore: productResponse.avgScore || productResponse.rating || 0,
			detail: productResponse.detail || productResponse.description || '',
			specs: productResponse.specs || [],
			skus: productResponse.skus || [],
			// 保存原始pic和pic2数据用于详情展示
			pic: productResponse.pic,
			pic2: productResponse.pic2
		}
			
		// 处理轮播图片 - 使用pic字段
		if (productResponse.pic) {
			let imageList = productResponse.pic
			console.log('轮播图原始数据(pic):', imageList, typeof imageList)
			
			// 如果是字符串，按逗号分割
			if (typeof imageList === 'string') {
				imageList = imageList.split(',').map(img => img.trim())
			}
			
			// 如果是数组，直接使用
			if (Array.isArray(imageList) && imageList.length > 0) {
				productImages.value = imageList.map(img => {
					if (!img || img.trim() === '') return null
					// 如果图片路径不是完整URL，需要拼接基础URL
					if (!img.startsWith('http')) {
						return `http://8.145.55.161:19000${img.startsWith('/') ? img : '/' + img}`
					}
					return img
				}).filter(img => img) // 过滤空值
			} else {
				productImages.value = ['/static/images/product-placeholder.jpg']
			}
		} else {
			productImages.value = ['/static/images/product-placeholder.jpg']
		}
		
		console.log('处理后的商品信息:', productInfo.value)
		console.log('处理后的轮播图片(pic):', productImages.value)
		
		// 处理商品详情图片 - 使用pic2字段
		if (productResponse.pic2) {
			let pic2List = productResponse.pic2
			console.log('详情图原始数据(pic2):', pic2List, typeof pic2List)
			
			// 如果是字符串，按逗号分割
			if (typeof pic2List === 'string') {
				pic2List = pic2List.split(',').map(img => img.trim())
			}
			
			// 如果是数组，直接使用
			if (Array.isArray(pic2List) && pic2List.length > 0) {
				detailImages.value = pic2List.map(img => {
					if (!img || img.trim() === '') return null
					// 如果图片路径不是完整URL，需要拼接基础URL
					if (!img.startsWith('http')) {
						return `http://8.145.55.161:19000${img.startsWith('/') ? img : '/' + img}`
					}
					return img
				}).filter(img => img) // 过滤空值
			} else {
				detailImages.value = []
			}
		} else {
			detailImages.value = []
		}
		
		console.log('处理后的详情图片(pic2):', detailImages.value)
		
		// 检查收藏状态
		checkFavoriteStatus(numericProductId)
		
		// 加载推荐商品
		loadRecommendProducts()
		
		// 加载商品参数
		loadProductParams()
		
		// 加载商品评价
		loadProductReviews(numericProductId)
		
		// 加载售后保障
		loadAfterSale(numericProductId)
		
		// 立即加载商品规格（使用已加载的商品信息）
		await loadProductSpecs()
		
	} catch (error) {
		console.error('加载商品详情失败:', error)
		console.error('错误详细信息:', {
			message: error.message,
			stack: error.stack,
			response: error.response
		})
		uni.showToast({
			title: error.message || '加载失败，请重试',
			icon: 'none'
		})
	} finally {
		isLoading.value = false
	}
}

// 加载推荐商品
const loadRecommendProducts = async () => {
	try {
		console.log('=== 开始加载推荐商品 ===')
		// 根据产品的level2Id获取推荐商品，并请求更多数据以便过滤
		const level2Id = productInfo.value.level2Id || null
		const params = level2Id ? { level2Id, pageSize: 20 } : { pageSize: 20 } // 请求20个以便过滤后还能有足6个
		const response = await productApi.getRecommendProducts(level2Id)
		console.log('推荐商品API响应:', response)
		console.log('推荐商品API响应类型:', typeof response)
		console.log('推荐商品API响应长度:', Array.isArray(response) ? response.length : 'N/A')
		
		if (response && Array.isArray(response) && response.length > 0) {
			console.log('=== 开始处理API返回的推荐商品 ===')
			// 过滤掉当前商品，然后取前6个作为推荐商品
			const filteredProducts = response.filter((item, index) => {
				try {
					const itemId = item.productId || item.id
					const currentId = productInfo.value.id
					const shouldInclude = itemId != currentId // 使用!=而不是!==以处理字符串和数字比较
					console.log(`过滤商品 ${index + 1}: itemId=${itemId}, currentId=${currentId}, include=${shouldInclude}`)
					return shouldInclude
				} catch (error) {
					console.error(`过滤商品 ${index + 1} 时出错:`, error, item)
					return true // 如果过滤时出错，保留该商品
				}
			})
			
			console.log('过滤后的推荐商品数量:', filteredProducts.length)
			
			recommendProducts.value = filteredProducts.slice(0, 6).map((item, index) => {
				try {
					// 更全面的数据验证和错误处理
					console.log(`处理推荐商品 ${index + 1}:`, item)
					
					const productData = {
						id: item.productId || item.id || (Date.now() + index),
						name: item.name || item.productName || '商品名称',
						price: item.price || 0,
						pic: item.pic || item.image || item.thumbnail || '/static/images/product-placeholder.jpg'
					}
					
					console.log(`推荐商品 ${index + 1} 处理完成:`, productData)
					return productData
				} catch (error) {
					console.error(`处理推荐商品 ${index + 1} 数据错误:`, error, item)
					return {
						id: Date.now() + index + Math.random(),
						name: '商品名称',
						price: 0,
						pic: '/static/images/product-placeholder.jpg'
					}
				}
			}).filter(product => product) // 过滤掉可能的null值
			console.log('成功加载推荐商品，过滤当前商品后数量:', recommendProducts.value.length)
			console.log('最终推荐商品数据:', recommendProducts.value)
		} else {
			console.log('=== API无返回数据，使用模拟数据 ===')
			// 使用模拟数据作为备用，并确保不包含当前商品ID
			const currentId = productInfo.value.id
			const mockProducts = [
				{ id: 1001, name: '高品质商品A', price: 649.99, pic: 'http://8.145.55.161:19000/upload/product/product1.jpg' },
				{ id: 1002, name: '热销商品B', price: 899.99, pic: 'http://8.145.55.161:19000/upload/product/product2.jpg' },
				{ id: 1003, name: '推荐商品C', price: 1299.99, pic: 'http://8.145.55.161:19000/upload/product/product3.jpg' },
				{ id: 1004, name: '精选商品D', price: 549.99, pic: 'http://8.145.55.161:19000/upload/product/product4.jpg' },
				{ id: 1005, name: '热门商品E', price: 999.99, pic: 'http://8.145.55.161:19000/upload/product/product5.jpg' },
				{ id: 1006, name: '优质商品F', price: 789.99, pic: 'http://8.145.55.161:19000/upload/product/product6.jpg' },
				{ id: 1007, name: '特色商品G', price: 599.99, pic: 'http://8.145.55.161:19000/upload/product/product7.jpg' },
				{ id: 1008, name: '精品商品H', price: 1099.99, pic: 'http://8.145.55.161:19000/upload/product/product8.jpg' }
			]
			
			// 过滤掉当前商品ID，取前6个
			recommendProducts.value = mockProducts
				.filter(item => item.id != currentId)
				.slice(0, 6)
			console.log('使用模拟推荐数据，过滤当前商品后数量:', recommendProducts.value.length)
		}
	} catch (error) {
		console.error('加载推荐商品失败:', error)
		console.error('推荐商品错误详情:', {
			message: error.message,
			stack: error.stack,
			productInfoId: productInfo.value.id
		})
		// 使用模拟数据作为备用
		const currentId = productInfo.value.id
		const mockProducts = [
			{ id: 1001, name: '高品质商品A', price: 649.99, pic: 'http://8.145.55.161:19000/upload/product/product1.jpg' },
			{ id: 1002, name: '热销商品B', price: 899.99, pic: 'http://8.145.55.161:19000/upload/product/product2.jpg' },
			{ id: 1003, name: '推荐商品C', price: 1299.99, pic: 'http://8.145.55.161:19000/upload/product/product3.jpg' },
			{ id: 1004, name: '精选商品D', price: 549.99, pic: 'http://8.145.55.161:19000/upload/product/product4.jpg' },
			{ id: 1005, name: '热门商品E', price: 999.99, pic: 'http://8.145.55.161:19000/upload/product/product5.jpg' },
			{ id: 1006, name: '优质商品F', price: 789.99, pic: 'http://8.145.55.161:19000/upload/product/product6.jpg' },
			{ id: 1007, name: '特色商品G', price: 599.99, pic: 'http://8.145.55.161:19000/upload/product/product7.jpg' },
			{ id: 1008, name: '精品商品H', price: 1099.99, pic: 'http://8.145.55.161:19000/upload/product/product8.jpg' }
		]
		
		recommendProducts.value = mockProducts
			.filter(item => item.id != currentId)
			.slice(0, 6)
		console.log('使用模拟推荐数据(错误备用)，过滤当前商品后数量:', recommendProducts.value.length)
	}
}

// 获取商品图片URL
const getProductImage = (pic) => {
	if (!pic) return '/static/images/product-placeholder.jpg'
	
	let imageUrl = pic
	if (typeof pic === 'string' && pic.includes(',')) {
		imageUrl = pic.split(',')[0].trim()
	}
	
	// 确保imageUrl是字符串类型
	if (typeof imageUrl !== 'string') {
		imageUrl = String(imageUrl || '')
	}
	
	if (!imageUrl.startsWith('http')) {
		return `http://8.145.55.161:19000${imageUrl.startsWith('/') ? imageUrl : '/' + imageUrl}`
	}
	return imageUrl
}

// 获取商品背景图片URL（专门用于pic1字段）
const getProductImageForBackground = (pic) => {
	if (!pic) {
		return 'http://8.145.55.161:19000/images/default-product.gif'
	}
	
	// 如果pic是数组，取第一张图片（pic1）
	let imageUrl = pic
	if (Array.isArray(pic) && pic.length > 0) {
		imageUrl = pic[0]
	} else if (typeof pic === 'string' && pic.includes(',')) {
		// 如果pic是字符串，按逗号分割，取第一张
		imageUrl = pic.split(',')[0].trim()
	} else if (typeof pic === 'string') {
		imageUrl = pic.trim()
	}
	
	// 确保imageUrl是字符串类型
	if (typeof imageUrl !== 'string') {
		imageUrl = String(imageUrl || '')
	}
	
	// 如果不是完整URL，需要拼接基础URL
	if (imageUrl && !imageUrl.startsWith('http')) {
		const fullUrl = `http://8.145.55.161:19000${imageUrl.startsWith('/') ? imageUrl : '/' + imageUrl}`
		return fullUrl
	}
	
	return imageUrl || '/static/images/product-placeholder.jpg'
}

// 跳转到商品详情
const goToProductDetail = (productId) => {
	uni.navigateTo({
		url: `/pages/product/detail?productId=${productId}`
	})
}

// 格式化价格
const formatPrice = (price) => {
	if (!price && price !== 0) return '0.00'
	return parseFloat(price).toFixed(2)
}

// 参数相关方法
// 显示参数详情弹窗
const showParamDetail = async () => {
	try {
		console.log('点击了查看参数详情按钮')
		// 先显示弹窗，再加载数据
		showParamModal.value = true
		// 加载参数详情
		await loadProductParams()
	} catch (error) {
		console.error('加载参数失败:', error)
		// 但仍然显示弹窗
		showParamModal.value = true
	}
}

// 加载商品参数
const loadProductParams = async () => {
	try {
		const productId = productInfo.value.id
		if (!productId) {
			throw new Error('商品ID不存在')
		}
		
		const response = await productApi.getProductParam(productId)
		console.log('商品参数响应:', response)
		
		if (response && Array.isArray(response) && response.length > 0) {
			// 处理API返回的数据格式
			productParams.value = response.map(param => ({
				description: param.description || param.name || '参数名称',
				value: param.value || param.val || '参数值'
			}))
			
			// 设置主页面显示的参数（取前3个）
			displayParams.value = productParams.value.slice(0, 3)
		} else {
			// 使用默认数据
			productParams.value = [
				{ description: '产地', value: '长白山' },
				{ description: '重量', value: '500g' },
				{ description: '保质期', value: '6个月' }
			]
			displayParams.value = productParams.value
		}
		
	} catch (error) {
		// 使用默认数据
		productParams.value = [
			{ description: '产地', value: '长白山' },
			{ description: '重量', value: '500g' },
			{ description: '保质期', value: '6个月' }
		]
		displayParams.value = productParams.value
		console.log('使用默认参数:', productParams.value)
	}
}

// 关闭参数详情弹窗
const closeParamModal = () => {
	showParamModal.value = false
}

// 规格相关方法
// 显示规格选择弹窗
const showSpecDetail = async () => {
	try {
		console.log('=== 点击了选择规格按钮 ===')
		// 初始化临时选中的规格为当前已选中的规格
		tempSelectedSpecs.value = { ...selectedSpecs.value }
		tempSelectedSpecsData.value = { ...selectedSpecsData.value }
		// 先显示弹窗，再加载数据
		showSpecModal.value = true
		// 强制重新加载规格数据
		console.log('强制重新加载规格数据')
		await loadProductSpecs()
	} catch (error) {
		console.error('加载规格失败:', error)
		// 但仍然显示弹窗
		showSpecModal.value = true
	}
}

// 加载商品规格
const loadProductSpecs = async () => {
	try {
		const productId = productInfo.value.id
		if (!productId) {
			throw new Error('商品ID不存在')
		}
		
		let processedSpecs = []
		
		// 先检查商品详情中是否已经包含规格数据
		if (productInfo.value.specs && productInfo.value.specs.length > 0) {
			console.log('从商品详情中获取规格:', productInfo.value.specs)
			processedSpecs = parseSpecsFromArray(productInfo.value.specs)
		} else if (productInfo.value.skus && productInfo.value.skus.length > 0) {
			console.log('从商品SKU中获取规格:', productInfo.value.skus)
			processedSpecs = parseSpecsFromArray(productInfo.value.skus)
		}
		
		// 如果从商品详情中没有获取到规格，尝试调用独立的API
		if (processedSpecs.length === 0) {
			try {
				const response = await productApi.getProductSpecs(productId)
				
				if (response) {
					
					// 直接检查是否有specValues字段（API直接返回的结构）
					if (response.specValues && Array.isArray(response.specValues)) {
						processedSpecs = parseSpecsFromObject(response)
					} else if (Array.isArray(response)) {
						// 如果response是数组
						processedSpecs = parseSpecsFromArray(response)
					} else if (typeof response === 'object') {
						// 如果response是对象，可能包含specs字段
						processedSpecs = parseSpecsFromObject(response)
					} 
				}
			} catch (apiError) {
				console.error('独立的规格API调用失败:', apiError)
			}
		}
		
		// 如果仍然没有规格数据，使用默认规格
		if (processedSpecs.length === 0) {
			processedSpecs = getDefaultSpecs()
		}
		productSpecs.value = processedSpecs
	} catch (error) {
		// 使用默认规格
		productSpecs.value = getDefaultSpecs()
	}
}

// 从数组格式解析规格
const parseSpecsFromArray = (specsArray) => {
	const specs = []
	
	// 如果数组中包含对象，尝试解析
	if (specsArray.length > 0 && typeof specsArray[0] === 'object') {
		// 按name分组规格值
		const groupedSpecs = {}
		
		specsArray.forEach(item => {
			// 尝试多种字段名称获取规格名称
			const name = item.name || item.specName || item.attrName || item.attributeName || '规格'
			
			// 尝试多种字段名称获取规格值
			let value = item.value || item.specValue || item.attrValue || item.valueId || item.skuCode
			
			// 如果没有直接的值，尝试查找嵌套的specValues或options
			if (!value && item.specValues && Array.isArray(item.specValues)) {
				// 如果有specValues数组，直接使用
				if (!groupedSpecs[name]) {
					groupedSpecs[name] = [...item.specValues]
				}
				return
			}
			
			if (!value && item.options && Array.isArray(item.options)) {
				// 如果有options数组，直接使用
				if (!groupedSpecs[name]) {
					groupedSpecs[name] = [...item.options]
				}
				return
			}
			
			// 如果还是没有值，使用默认值
			if (!value) {
				value = '选项'
			}
			
			// 按name分组
			if (!groupedSpecs[name]) {
				groupedSpecs[name] = []
			}
			
			if (!groupedSpecs[name].includes(value)) {
				groupedSpecs[name].push(value)
			}
		})
		
		// 转换为所需格式
		Object.entries(groupedSpecs).forEach(([name, values]) => {
			if (values.length > 0) {
				specs.push({
					name: name,
					specValues: values
				})
			}
		})
	} else if (specsArray.length > 0 && typeof specsArray[0] === 'string') {
		// 如果数组中包含字符串，作为单个规格的值
		specs.push({
			name: '规格',
			specValues: specsArray
		})
	}
	
	return specs
}

// 从对象格式解析规格
const parseSpecsFromObject = (responseObj) => {
	const specs = []
	
	// 检查是否有specs字段
	if (responseObj.specs && Array.isArray(responseObj.specs)) {
		return parseSpecsFromArray(responseObj.specs)
	}
	
	// 检查是否有skus字段
	if (responseObj.skus && Array.isArray(responseObj.skus)) {
		return parseSpecsFromArray(responseObj.skus)
	}
	
	// 检查是否有specValues字段（API返回的直接结构）
	if (responseObj.specValues && Array.isArray(responseObj.specValues)) {
	
		// 按groupId分组规格值
		const groupedSpecs = {}
	
		responseObj.specValues.forEach((item, index) => {
			// 使用groupId作为分组标识，或者使用默认名称
			const groupName = getSpecGroupName(item.groupId) || '容量'
			
			if (!groupedSpecs[groupName]) {
				groupedSpecs[groupName] = []
			}
			
			// 保存完整的SpecValue对象
			groupedSpecs[groupName].push({
				valueId: item.valueId,
				name: item.name || item.value || '选项',
				priceDiff: item.priceDiff || 0,
				stock: item.stock || 0,
				sortOrder: item.sortOrder || 0
			})
		})
		
		
		// 转换为所需格式
		Object.entries(groupedSpecs).forEach(([name, values]) => {
			if (values.length > 0) {
				specs.push({
					name: name,
					specValues: values
				})
			}
		})
	}
	
	return specs
}

// 根据groupId获取规格组名称
const getSpecGroupName = (groupId) => {
	// 根据实际业务需求映射groupId到规格名称
	const groupMapping = {
		1: '容量',
		2: '产地',
		3: '重量',
		4: '颜色',
		5: '尺寸'
	}
	return groupMapping[groupId] || `规格${groupId}`
}

// 获取默认规格（示例数据）
const getDefaultSpecs = () => {
	return [
		{
			name: '包装规格',
			specValues: [
				{ valueId: 1, name: '12包装', priceDiff: 0, stock: 500, sortOrder: 1 },
				{ valueId: 2, name: '24包装', priceDiff: 80, stock: 300, sortOrder: 2 }
			]
		},
		{
			name: '产地',
			specValues: [
				{ valueId: 3, name: '长白山', priceDiff: 0, stock: 400, sortOrder: 1 },
				{ valueId: 4, name: '泰山', priceDiff: 20, stock: 200, sortOrder: 2 }
			]
		}
	]
}

// 选择规格
const selectSpecOption = (specName, option) => {
	tempSelectedSpecs.value[specName] = option.valueId
	// 存储完整的选项信息以便显示
	tempSelectedSpecsData.value[specName] = option
}

// 获取已选中规格的显示名称
const getSelectedSpecValueName = (specName) => {
	const selectedData = tempSelectedSpecsData.value[specName]
	return selectedData ? selectedData.name : null
}

// 检查规格选择是否完整
const isSpecSelectionComplete = () => {
	if (productSpecs.value.length === 0) return true
	return productSpecs.value.every(spec => tempSelectedSpecs.value[spec.name])
}

// 确认规格选择
const confirmSpecSelection = () => {
	if (!isSpecSelectionComplete()) {
		uni.showToast({
			title: '请选择完整的规格',
			icon: 'none'
		})
		return
	}
	
	// 更新已选中的规格
	selectedSpecs.value = { ...tempSelectedSpecs.value }
	// 保存规格完整数据用于显示
	selectedSpecsData.value = { ...tempSelectedSpecsData.value }
	// 关闭弹窗
	showSpecModal.value = false
	// 显示成功消息
	uni.showToast({
		title: '规格选择完成',
		icon: 'success'
	})
}

// 关闭规格选择弹窗
const closeSpecModal = () => {
	showSpecModal.value = false
	// 重置临时选中规格为当前已选中的规格
	tempSelectedSpecs.value = { ...selectedSpecs.value }
	tempSelectedSpecsData.value = { ...selectedSpecsData.value }
}

// 获取已选中规格文本（简短版本）
const getSelectedSpecText = () => {
	const specs = Object.entries(selectedSpecsData.value)
	if (specs.length === 0) {
		return ''
	}
	// 只显示第一个规格值，保持简洁
	return specs[0][1].name
}

// 获取已选中规格完整文本（悬停显示）
const getSelectedSpecFullText = () => {
	const specs = Object.entries(selectedSpecsData.value)
	if (specs.length === 0) {
		return ''
	}
	// 显示所有规格值
	return specs.map(([name, specData]) => specData.name).join(' • ')
}

// 检查收藏状态
const checkFavoriteStatus = async (productId) => {
	// 防止重复调用
	if (isCheckingFavorite.value) return
	isCheckingFavorite.value = true

	try {
		// 检查accessToken是否存在
		const accessToken = typeof uni !== 'undefined' ?
			uni.getStorageSync('accessToken') :
			(typeof localStorage !== 'undefined' ? localStorage.getItem('accessToken') : '')

		if (!accessToken) {
			// 未登录状态，设置为未收藏
			isFavorited.value = false
			return
		}

		// 从accessToken中解析用户ID
		const userId = getUserIdFromToken(accessToken)
		if (!userId) {
			isFavorited.value = false
			return
		}

		// 调用getProductCollection检查收藏状态
		const result = await productApi.getProductCollection({
			userId: userId,
			productId: productId
		})

		// 如果有返回信息则代表该商品已收藏
		isFavorited.value = !!(result && (result.id || result.collectionId || result.isCollected))
		
	} catch (error) {
		console.error('检查收藏状态失败:', error)
		// 出错时默认设置为未收藏
		isFavorited.value = false
	} finally {
		isCheckingFavorite.value = false
	}
}

// 下拉刷新
const onRefresh = async () => {
	isRefreshing.value = true
	try {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const options = currentPage.options
		
		// 支持多种参数名称
		const productId = options.productId || options.id
		
		if (productId) {
			// 清空旧数据，确保刷新时数据完全重新加载
			productReviews.value = []
			recommendProducts.value = []
			await loadProductDetail(productId)
		}
	} finally {
		isRefreshing.value = false
	}
}

// 图片轮播
const onImageChange = (e) => {
	currentImageIndex.value = e.detail.current
}

const previewImages = () => {
	uni.previewImage({
		urls: productImages.value,
		current: currentImageIndex.value
	})
}

// 规格选择
const isSpecSelected = (specName, specValue) => {
	return selectedSpecs.value[specName] === specValue
}

const updateSelectedSpec = () => {
	// 根据选择的规格组合找到对应的SKU
	if (productInfo.value.skus) {
		selectedSpec.value = productInfo.value.skus.find(sku => {
			return Object.keys(selectedSpecs.value).every(key => 
				sku.specs[key] === selectedSpecs.value[key]
			)
		})
	}
}

// 数量选择
const changeQuantity = (delta) => {
	const newQuantity = quantity.value + delta
	if (newQuantity >= 1 && newQuantity <= maxQuantity.value) {
		quantity.value = newQuantity
	}
}

const validateQuantity = () => {
	if (quantity.value < 1) {
		quantity.value = 1
	} else if (quantity.value > maxQuantity.value) {
		quantity.value = maxQuantity.value
	}
}

// 操作方法
const toggleFavorite = async () => {
	// 检查accessToken是否存在
	const accessToken = typeof uni !== 'undefined' ? 
		uni.getStorageSync('accessToken') : 
		(typeof localStorage !== 'undefined' ? localStorage.getItem('accessToken') : '')
	
	if (!accessToken) {
		uni.navigateTo({
			url: '/pages/auth/login'
		})
		return
	}
	
	try {
		// 从accessToken中解析用户ID
		const userId = getUserIdFromToken(accessToken)
		if (!userId) {
			uni.showToast({
				title: '用户信息获取失败，请重新登录',
				icon: 'none'
			})
			return
		}
		
		// 获取当前商品ID
		const productId = productInfo.value.id
		if (!productId) {
			uni.showToast({
				title: '商品信息获取失败',
				icon: 'none'
			})
			return
		}
		
		if (isFavorited.value) {
			// 取消收藏 - 调用cancelProductCollection方法
			await productApi.cancelProductCollection({
				userId: userId,
				productId: productId
			})
			isFavorited.value = false
			uni.showToast({
				title: '已取消收藏',
				icon: 'success'
			})
		} else {
			// 添加收藏 - 调用addProductCollection方法
			await productApi.addProductCollection({
				userId: userId,
				productId: productId
			})
			isFavorited.value = true
			uni.showToast({
				title: '收藏成功',
				icon: 'success'
			})
		}
	} catch (error) {
		console.error('收藏操作失败:', error)
		uni.showToast({
			title: '操作失败，请重试',
			icon: 'none'
		})
	}
}

// 从JWT token中解析用户ID的辅助函数
const getUserIdFromToken = (token) => {
	try {
		// JWT token由三部分组成：header.payload.signature
		const payload = token.split('.')[1]
		if (!payload) {
			return null
		}
		
		// Base64解码payload
		const decodedPayload = JSON.parse(atob(payload))
		
		// 通常用户ID存储在sub字段或userId字段中
		return decodedPayload.sub || decodedPayload.userId || decodedPayload.id || null
	} catch (error) {
		console.error('解析token失败:', error)
		return null
	}
}

const addToCart = async () => {
	if (!validateSelection()) return
	
	try {
		const cartData = {
			productId: productInfo.value.id,
			specId: selectedSpec.value?.id,
			quantity: quantity.value,
			cartType: 'personal'
		}
		
		const response = await cartApi.addToCart(cartData)
		// 检查响应结果
		if (response === true || (response && (response.code === 200 || response.code === 0))) {
			store.actions.setCartCount((store.state.cartCount || 0) + quantity.value)
			
			uni.showToast({
				title: '已加入购物车',
				icon: 'success'
			})
		} else {
			console.error('加入购物车失败:', response)
			uni.showToast({
				title: '加入失败，请重试',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('加入购物车失败:', error)
		uni.showToast({
			title: '加入失败，请重试',
			icon: 'none'
		})
	}
}

const buyNow = () => {
	if (!validateSelection()) return
	
	const orderData = {
		items: [{
			productId: productInfo.value.id,
			specId: selectedSpec.value?.id,
			specValueId: selectedSpec.value?.id, // 后端期望的字段名
			quantity: quantity.value,
			price: selectedSpec.value ? selectedSpec.value.price : productInfo.value.price
		}],
		type: 'direct'
	}
	
	uni.navigateTo({
		url: `/pages/order/confirm?data=${encodeURIComponent(JSON.stringify(orderData))}`
	})
}

const validateSelection = () => {
	if (!store.state.isLoggedIn) {
		uni.navigateTo({
			url: '/pages/auth/login'
		})
		return false
	}
	
	if (productInfo.value.specs && productInfo.value.specs.length > 0) {
		if (!selectedSpec.value) {
			uni.showToast({
				title: '请选择商品规格',
				icon: 'none'
			})
			return false
		}
	}
	
	if (quantity.value > maxQuantity.value) {
		uni.showToast({
			title: '库存不足',
			icon: 'none'
		})
		return false
	}
	
	return true
}

// 跳转到购物车
const goToCart = () => {
	// 检查用户是否已登录
	if (!store.state.isLoggedIn) {
		uni.navigateTo({
			url: '/pages/auth/login'
		})
		return
	}
	
	uni.switchTab({
		url: '/pages/cart/index'
	})
}

// 显示加入购物车弹窗
const showAddToCartModal = () => {
	if (!store.state.isLoggedIn) {
		uni.navigateTo({
			url: '/pages/auth/login'
		})
		return
	}
	
	// 如果有规格选择，显示规格选择弹窗
	if (productSpecs.value && productSpecs.value.length > 0) {
		// 重置临时选择状态
		// 从selectedSpecsData中提取valueId到tempSelectedSpecs
		tempSelectedSpecs.value = {}
		tempSelectedSpecsData.value = {}
		
		// 遍历已选中的规格数据，正确初始化临时选择状态
		for (const [specName, specData] of Object.entries(selectedSpecsData.value)) {
			if (specData && specData.valueId) {
				tempSelectedSpecs.value[specName] = specData.valueId
				tempSelectedSpecsData.value[specName] = specData
			}
		}
		
		showSpecModal.value = true
	} else {
		// 没有规格选择，直接显示购物车类型选择
		showCartTypeModal()
	}
}

// 显示购物车类型选择
const showCartTypeModal = () => {
	uni.showActionSheet({
		itemList: ['加入个人购物车', '加入船舶购物车'],
		success: (res) => {
			if (res.tapIndex === 0) {
				addToCartWithType(1) // 个人购物车
			} else if (res.tapIndex === 1) {
				addToCartWithType(2) // 船舶购物车
			}
		}
	})
}

// 加入个人购物车
const addToPersonalCart = async () => {
	if (!isSpecSelectionComplete()) {
		uni.showToast({
			title: '请选择完整规格',
			icon: 'none'
		})
		return
	}
	
	// 更新已选中的规格数据
	selectedSpecsData.value = { ...tempSelectedSpecsData.value }
	// 添加到个人购物车
	await addToCartWithType(1)
	// 关闭弹窗
	showSpecModal.value = false
}

// 加入船舶购物车
const addToShipCart = async () => {
	if (!isSpecSelectionComplete()) {
		uni.showToast({
			title: '请选择完整规格',
			icon: 'none'
		})
		return
	}
	
	// 更新已选中的规格数据
	selectedSpecsData.value = { ...tempSelectedSpecsData.value }
	
	// 显示船舶选择弹窗
	showShipModal.value = true
	// 加载船舶列表
	await loadShipList()
	
	// 关闭规格选择弹窗
	showSpecModal.value = false
}

// 根据类型添加到购物车
const addToCartWithType = async (cartType, shipId = null) => {
	try {
		// 获取用户ID
		const accessToken = uni.getStorageSync('accessToken')
		const userId = getUserIdFromToken(accessToken)
		if (!userId) {
			uni.showToast({
				title: '用户信息获取失败',
				icon: 'none'
			})
			return
		}
		
		// 获取选中的规格值ID
		const specValueIds = []
		for (const [specName, specData] of Object.entries(selectedSpecsData.value)) {
			if (specData && specData.valueId) {
				specValueIds.push(specData.valueId)
			}
		}
		
		// 如果没有已确认的规格，使用临时选择的规格
		if (specValueIds.length === 0) {
			for (const [specName, specData] of Object.entries(tempSelectedSpecsData.value)) {
				if (specData && specData.valueId) {
					specValueIds.push(specData.valueId)
				}
			}
		}
		
		// 构建购物车数据
		const cartData = {
			userId: userId,
			productId: productInfo.value.id,
			quantity: quantity.value,
			cartType: cartType // 使用整数类型 (1-个人购物车;2-船舶购物车)
		}
		
		// 只有当有选择规格时才添加specValue字段
		if (specValueIds.length > 0) {
			cartData.specValue = specValueIds.join(',') // 使用规格值ID而不是规格名称
		}
		
		// 如果是船舶购物车，需要获取船舶ID
		if (cartType === 2) {
			// 如果传入了shipId，则使用传入的shipId
			if (shipId) {
				cartData.shipId = shipId
			} else {
				// 否则使用store中的shipId
				const storeShipId = store.selectedShipId || store.currentShipId
				if (!storeShipId) {
					uni.showToast({
						title: '请先选择船舶',
						icon: 'none'
					})
					return
				}
				cartData.shipId = storeShipId
			}
		}
		
		console.log('添加购物车参数:', cartData)
		
		// 使用购物车API (POST请求)
		try {
			console.log('调用购物车API前的参数:', JSON.stringify(cartData))
			console.log('规格值ID列表:', specValueIds)
			const response = await productApi.addProductToCart(cartData)
			console.log('购物车API调用成功:', response)
			
			// 检查响应结果 - 由于后端返回的是Result对象，需要正确处理
			// 成功情况：response为true、response.code为200或0、HTTP状态码为200且无错误信息
			if (response === true || 
				(response && (response.code === 200 || response.code === 0)) ||
				(response && !response.code && !response.message)) {
				// 显示成功提示
				uni.showToast({
					title: '已成功加入购物车',
					icon: 'success'
				})
				
				// 更新购物车数量
				store.actions.setCartCount((store.state.cartCount || 0) + quantity.value)
				return true // 返回成功标志
			} else {
				// 显示错误提示
				const errorMsg = response && response.message ? response.message : '加入购物车失败'
				uni.showToast({
					title: errorMsg,
					icon: 'none'
				})
				console.log('购物车添加失败，错误信息:', errorMsg)
				return false // 返回失败标志
			}
		} catch (error) {
			console.error('购物车API调用失败:', error)
			console.error('错误详情:', JSON.stringify(error))
			
			// 显示错误提示
			uni.showToast({
				title: '加入购物车失败: ' + (error.message || '未知错误'),
				icon: 'none'
			})
			return false // 返回失败标志
		}
		
		// 购物车数量更新和成功提示已在try块内部处理，这里不再重复
		return true; // 确保外部try块在内部try块成功后返回
	} catch (error) {
		console.error('加入购物车失败:', error)
		uni.showToast({
			title: '加入失败，请重试',
			icon: 'none'
		})
		return false; // 确保外部catch块返回失败标志
	}
}


// 处理详情图片URL
const getDetailImageUrl = (img) => {
	if (!img || img.trim() === '') return ''
	// 如果图片路径不是完整URL，需要拼接基础URL
	if (!img.startsWith('http')) {
		return `http://8.145.55.161:19000${img.startsWith('/') ? img : '/' + img}`
	}
	return img
}

// 加载船舶列表
const loadShipList = async () => {
	try {
		// 清空已选中的船舶
		selectedShip.value = {}
		
		// 调用后端API获取船舶公司和船舶列表
		const response = await productApi.getShipList()
		shipList.value = response || []
		
		// 初始化每个公司的选中状态为false
		shipList.value.forEach(company => {
			company.selected = false
			
			// 确保每个船舶都有selected属性，初始为false
			if (company.ships && Array.isArray(company.ships)) {
				company.ships.forEach(ship => {
					ship.selected = false
				})
			}
		})
		
		console.log('加载船舶列表成功:', shipList.value)
	} catch (error) {
		console.error('加载船舶列表失败:', error)
		uni.showToast({
			title: '加载船舶列表失败',
			icon: 'none'
		})
	}
}

// 切换公司展开/折叠状态
const toggleCompany = (company) => {
	// 切换当前公司的选中状态
	company.selected = !company.selected
}

// 选择船舶
const selectShip = (ship) => {
	// 更新选中的船舶
	selectedShip.value = ship
	showShipModal.value = false
	
	// 添加到船舶购物车，只传递船舶ID
	addToCartWithType(2, ship.shipId)
}

// 移除添加新船舶函数

// 处理详情图片加载错误
const onDetailImageError = (e) => {
	console.error('详情图片加载失败:', e)
}

// 处理推荐商品图片加载错误
const onRecommendImageError = (e) => {
	console.error('推荐商品图片加载失败:', e)
	const target = e.target || e.currentTarget
	if (target) {
		target.src = 'http://8.145.55.161:19000/images/default-product.gif'
	}
}

// 处理推荐商品图片加载成功
const onRecommendImageLoad = (e) => {
	console.log('推荐商品图片加载成功:', e.target?.src)
}

const goToReviews = () => {
	uni.navigateTo({
		url: `/pages/product/reviews?productId=${productInfo.value.id}`
	})
}

// 获取用户头像（不使用默认头像）
const getUserAvatar = (review) => {
  const avatar = review?.user?.avatar || ''
  return resolveAvatarUrl(avatar)
}

// 获取用户昵称
const getUserNickname = (review) => {
	if (review.user && review.user.nickName) {
		return review.user.nickName
	}
	return '匿名用户'
}

// 获取评价图片URL
const getReviewImageUrl = (imageObj) => {
	if (!imageObj) return ''
	const imageUrl = imageObj.imageUrl || imageObj.url || imageObj
	if (!imageUrl) return ''
	if (!imageUrl.startsWith('http')) {
		return `http://8.145.55.161:19000${imageUrl.startsWith('/') ? imageUrl : '/' + imageUrl}`
	}
	return imageUrl
}

// 获取评价图片URL数组
const getReviewImagesUrls = (images) => {
	if (!images || !Array.isArray(images)) return []
	return images.map(img => getReviewImageUrl(img)).filter(url => url)
}

// 预览评价图片
const previewReviewImages = (images, currentIndex) => {
	if (!images || images.length === 0) return
	uni.previewImage({
		urls: images,
		current: currentIndex || 0
	})
}

const shareProduct = () => {
	uni.showToast({
		title: '分享功能开发中',
		icon: 'none'
	})
}

const showMore = () => {
	uni.showActionSheet({
		itemList: ['举报商品', '客服咨询'],
		success: (res) => {
			if (res.tapIndex === 0) {
				uni.showToast({
					title: '举报功能开发中',
					icon: 'none'
				})
			} else if (res.tapIndex === 1) {
				uni.navigateTo({
					url: '/pages/customer/service'
				})
			}
		}
	})
}

// 加载商品评价
const loadProductReviews = async (productId) => {
	try {
		const response = await productApi.getProductEvaluation(productId, {pageNum:1, pageSize: 3 })
		console.log('商品评价响应:', response)
		
		if (response && Array.isArray(response)) {
			// 显示前3条评价，不过滤user为空的
			productReviews.value = response.slice(0, 3)
		} else if (response && response.list && Array.isArray(response.list)) {
			// 显示前3条评价，不过滤user为空的
			productReviews.value = response.list.slice(0, 3)
		} else if (response && response.records && Array.isArray(response.records)) {
			// 支持MyBatis Plus分页格式
			productReviews.value = response.records.slice(0, 3)
		} else {
			productReviews.value = []
		}
	} catch (error) {
		console.error('加载商品评价失败:', error)
		productReviews.value = []
	}
}

// 加载售后保障
const loadAfterSale = async (productId) => {
	try {
		const response = await productApi.getAfterSale(productId)
		console.log('=== 售后保障API响应 ===', response)
		
		if (response) {
			let processedOptions = []
			
			// 如果API返回数组，表示多个选项
			if (Array.isArray(response)) {
				processedOptions = response.map((item, index) => ({
					id: item.id || index + 1,
					name: item.name || item.title || `售后服务${index + 1}`,
					description: item.description || item.desc || '售后服务描述'
				}))
			} else if (response.options && Array.isArray(response.options)) {
				// 如果API返回包含options字段的对象
				processedOptions = response.options.map((item, index) => ({
					id: item.id || index + 1,
					name: item.name || item.title || `售后服务${index + 1}`,
					description: item.description || item.desc || '售后服务描述'
				}))
			} else {
				// 单个选项，转换为数组格式
				processedOptions = [{
					id: response.id || 1,
					name: response.name || response.title || '售后服务',
					description: response.description || response.desc || '售后服务描述'
				}]
			}
			
			afterSaleOptions.value = processedOptions
			
			// 默认选中第一个选项
			if (processedOptions.length > 0) {
				selectedAfterSale.value = processedOptions[0]
				selectedAfterSaleName.value = processedOptions[0].name
				afterSaleInfo.value = processedOptions[0]
				console.log('默认选中第一个售后保障:', processedOptions[0])
			}
		} else {
			// 使用默认数据
			const defaultOptions = [
				{
					id: 1,
					name: '5天无理由退货',
					description: '未使用商品享7天无理由退换，需保持商品原包装完好'
				},
				{
					id: 2,
					name: '收货后15天内质量问题免费换货',
					description: '需提供问题相关证明'
				},
				{
					id: 3,
					name: '电子设备提供终身技术咨询和故障诊断服务',
					description: '专业技术支持，终身保障'
				},
				{
					id: 4,
					name: '大型设备提供专业安装服务',
					description: '需提前1-3工作日预约'
				}
			]
			afterSaleOptions.value = defaultOptions
			selectedAfterSale.value = defaultOptions[0]
			selectedAfterSaleName.value = defaultOptions[0].name
			afterSaleInfo.value = defaultOptions[0]
			console.log('使用默认售后保障选项')
		}
	} catch (error) {
		console.error('加载售后保障失败:', error)
		// 使用默认数据
		const defaultOptions = [
			{
				id: 1,
				name: '5天无理由退货',
				description: '未使用商品享7天无理由退换，需保持商品原包装完好'
			},
			{
				id: 2,
				name: '收货后15天内质量问题免费换货',
				description: '需提供问题相关证明'
			},
			{
				id: 3,
				name: '电子设备提供终身技术咨询和故障诊断服务',
				description: '专业技术支持，终身保障'
			},
			{
				id: 4,
				name: '大型设备提供专业安装服务',
				description: '需提前1-3工作日预约'
			}
		]
		afterSaleOptions.value = defaultOptions
		selectedAfterSale.value = defaultOptions[0]
		selectedAfterSaleName.value = defaultOptions[0].name
		afterSaleInfo.value = defaultOptions[0]
	}
}

// 售后保障相关方法
// 显示售后保障选择弹窗
const showAfterSaleDetail = async () => {
	try {
		console.log('=== 点击了选择售后保障按钮 ===')
		// 如果还没有加载过售后保障选项，先加载
		if (afterSaleOptions.value.length === 0) {
			console.log('首次加载售后保障数据')
			await loadAfterSale(productInfo.value.id)
		}
		
		// 显示弹窗
		showAfterSaleModal.value = true
		
		// 初始化临时选中的售后保障
		if (selectedAfterSale.value && selectedAfterSale.value.id) {
			// 如果已经有选中的，使用当前选中的
			tempSelectedAfterSale.value = { ...selectedAfterSale.value }
			console.log('使用已选中的售后保障:', tempSelectedAfterSale.value)
		} else if (afterSaleOptions.value.length > 0) {
			// 如果没有选中的，默认选中第一个
			tempSelectedAfterSale.value = { ...afterSaleOptions.value[0] }
			console.log('默认选中第一个售后保障:', tempSelectedAfterSale.value)
		} else {
			tempSelectedAfterSale.value = {}
			console.log('没有可用的售后保障选项')
		}
		
	} catch (error) {
		console.error('加载售后保障失败:', error)
		// 但仍然显示弹窗
		showAfterSaleModal.value = true
		tempSelectedAfterSale.value = {}
	}
}

// 选择售后保障选项
const selectAfterSaleOption = (option) => {
	// 确保只能选择一个选项，清除之前的选择
	tempSelectedAfterSale.value = { ...option }
	console.log('=== 选中售后保障 ===', option)
	console.log('售后保障标题:', option.title)
	console.log('售后保障描述:', option.description)
}

// 确认售后保障选择
const confirmAfterSaleSelection = () => {
	// 更新已选中的售后保障
	selectedAfterSale.value = { ...tempSelectedAfterSale.value }
	selectedAfterSaleName.value = tempSelectedAfterSale.value.name || tempSelectedAfterSale.value.title || ''
	afterSaleInfo.value = { ...tempSelectedAfterSale.value }
	// 关闭弹窗
	showAfterSaleModal.value = false
	// 显示成功消息
	uni.showToast({
		title: '售后保障选择完成',
		icon: 'success'
	})
	console.log('=== 最终选中售后保障 ===', selectedAfterSale.value)
	console.log('选中名称:', selectedAfterSaleName.value)
	console.log('选中描述:', selectedAfterSale.value.description)
}

// 关闭售后保障选择弹窗
const closeAfterSaleModal = () => {
	showAfterSaleModal.value = false
	// 重置临时选中的售后保障为当前已选中的
	if (selectedAfterSale.value && selectedAfterSale.value.id) {
		tempSelectedAfterSale.value = { ...selectedAfterSale.value }
	} else {
		tempSelectedAfterSale.value = {}
	}
	console.log('关闭弹窗，重置临时选中:', tempSelectedAfterSale.value)
}
</script>

<style lang="scss" scoped>
.product-detail-container {
	min-height: 100vh;
	background: #FFFFFF;
	position: relative;
}



.main-content {
	flex: 1;
	height: calc(100vh - 80px);
	padding-top: 0;
}

.product-gallery {
	position: relative;
	background: #FFFFFF;
	margin-top: 0;
}

.gallery-swiper {
	height: 250px;
}

.product-image {
	width: 100%;
	height: 100%;
}

.image-indicator {
	position: absolute;
	bottom: 15px;
	right: 15px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 12px;
	padding: 4px 8px;
	
	.indicator-text {
		font-size: 12px;
		color: #FFFFFF;
	}
}

.product-info {
	background: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 0;
}

.price-section {
	margin-bottom: 8px;
}

.price-row {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin-bottom: 5px;
	position: relative;
}

.price-symbol {
	font-size: 16px;
	color: #ff4757;
	font-weight: bold;
}

.current-price {
	font-size: 32px;
	font-weight: bold;
	color: #ff4757;
}

.price-decimal {
	font-size: 20px;
	color: #ff4757;
	font-weight: bold;
}

.promotion-tag {
	background: #ff4757;
	border-radius: 12px;
	padding: 2px 8px;
	margin-left: 10px;
}

.tag-text {
	font-size: 12px;
	color: #FFFFFF;
}

.share-count {
	position: absolute;
	right: 0;
	top: 0;
}

.share-text {
	font-size: 14px;
	color: #999999;
}

.title-section {
	margin-bottom: 15px;
}

.product-title {
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	line-height: 1.4;
	display: block;
}

// 商品参数
.product-params {
	background: #FFFFFF;
	padding: 12px 20px;
	margin-bottom: 0;
}

.param-title {
	margin-bottom: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.param-detail-btn {
	font-size: 13px;
	color: #4FACFE;
	cursor: pointer;
	transition: color 0.2s ease;

	&:hover {
		color: #3d8bfe;
	}
}

.title-text {
	font-size: 15px;
	font-weight: 500;
	color: #333333;
}

.param-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.param-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f1f3f8;
	border: 1px solid #e1e7f5;
	border-radius: 16px;
	padding: 6px 12px;
	transition: all 0.2s ease;
	flex-shrink: 0;
	max-width: calc(50% - 4px);

	&:hover {
		background: #e8ecf7;
		border-color: #c7d2fe;
		transform: translateY(-1px);
	}
}

.param-label {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
	flex-shrink: 0;
}

.param-value {
	font-size: 12px;
	color: #1e293b;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

// 规格、售后保障、买家评价
.spec-section,
.service-section,
.buyer-evaluation {
	background: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 0;
}

// 售后与评价间隔
.section-divider {
	height: 10px;
	background: #F5F5F5;
	margin-bottom: 0;
}

// 售后保障详细信息样式
.service-detail {
	margin-top: 10px;
	padding: 8px 12px;
	background: #f8f9fc;
	border-radius: 8px;
	border-left: 3px solid #4FACFE;
}

.service-description {
	font-size: 13px;
	color: #666666;
	line-height: 1.4;
	display: block;
}

.spec-row,
.service-row,
.evaluation-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.spec-label,
.service-label,
.evaluation-label {
	font-size: 16px;
	color: #333333;
}

.spec-selected {
	font-size: 14px;
	color: #4FACFE;
	flex: 1;
	text-align: right;
	margin-right: 10px;
	cursor: pointer;
	transition: color 0.2s ease;

	&:hover {
		color: #3d8bfe;
	}
}

.service-selected {
	font-size: 14px;
	color: #4FACFE;
	flex: 1;
	text-align: right;
	margin-right: 10px;
	cursor: pointer;
	transition: color 0.2s ease;

	&:hover {
		color: #3d8bfe;
	}
}

.service-value,
.evaluation-value {
	font-size: 14px;
	color: #666666;
	flex: 1;
	text-align: right;
	margin-right: 10px;
}

// 用户评价样式优化
.buyer-evaluation {
	background: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 0;
	border-radius: 0;
}

.evaluation-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f0f0f0;
}

.evaluation-label {
	font-size: 16px;
	color: #333333;
	font-weight: 600;
}

.evaluation-more {
	font-size: 14px;
	color: #4FACFE;
	cursor: pointer;
	transition: color 0.2s ease;
	font-weight: 500;
	
	&:hover {
		color: #3d8bfe;
	}
}

.review-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.review-item {
	padding: 16px 0;
	border-bottom: 1px solid #f5f5f5;
	transition: background-color 0.2s ease;
	
	&:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}
	
	&:hover {
		background: rgba(79, 172, 254, 0.02);
		border-radius: 8px;
		padding-left: 8px;
		padding-right: 8px;
		margin-left: -8px;
		margin-right: -8px;
	}
}

.review-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
}

.user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	flex-shrink: 0;
	border: 2px solid #f0f0f0;
	transition: border-color 0.2s ease;
}

.review-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.user-name {
	font-size: 14px;
	color: #333333;
	font-weight: 500;
	line-height: 1.2;
}

.review-rating {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 2px 0;
}

.star {
	font-size: 14px;
	color: #e0e0e0;
	transition: color 0.2s ease;
	line-height: 1;
	
	&.active {
		color: #FFB400;
		text-shadow: 0 0 2px rgba(255, 180, 0, 0.3);
	}
}

.review-spec {
	font-size: 12px;
	color: #999999;
	background: #f8f9fa;
	border-radius: 4px;
	padding: 2px 6px;
	line-height: 1.2;
	display: inline-block;
	margin-top: 2px;
}

.review-date {
	font-size: 12px;
	color: #999999;
	flex-shrink: 0;
	line-height: 1.2;
	margin-top: 2px;
}

.review-content {
	font-size: 14px;
	color: #555555;
	line-height: 1.6;
	margin: 0;
	text-align: justify;
	word-break: break-word;
}

// 商家回复样式
.merchant-reply {
	background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
	border-left: 3px solid #4FACFE;
	padding: 12px 16px;
	border-radius: 0 8px 8px 0;
	margin-top: 12px;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		left: -3px;
		top: 0;
		width: 3px;
		height: 100%;
		background: linear-gradient(to bottom, #4FACFE, #667eea);
		border-radius: 2px;
	}
}

.reply-header {
	margin-bottom: 6px;
}

.reply-label {
	font-size: 13px;
	color: #4FACFE;
	font-weight: 600;
	letter-spacing: 0.5px;
}

.reply-content {
	font-size: 14px;
	color: #555555;
	line-height: 1.5;
	font-style: italic;
}

// 根据原型图优化的评价内容样式
.review-content-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 8px;
}

.review-content-container .review-content {
	flex: 1;
	font-size: 14px;
	color: #666666;
	line-height: 1.5;
	margin: 0;
}

// 右侧缩略图显示
.review-images-thumb {
	flex-shrink: 0;
}

.thumb-wrapper {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease;
	
	&:hover {
		transform: scale(1.05);
	}
}

.review-thumb-image {
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.thumb-count-badge {
	position: absolute;
	bottom: 4px;
	right: 4px;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	padding: 2px 6px;
	min-width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.count-text {
	font-size: 10px;
	color: #FFFFFF;
	font-weight: 500;
	line-height: 1;
}

// 单张图片在右侧
.review-images-single {
	flex-shrink: 0;
}

.review-img-single {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease;
	
	&:hover {
		transform: scale(1.05);
	}
}

// 多张图片在下方
.review-images-multiple {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.review-img-multiple {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease;
	
	&:hover {
		transform: scale(1.05);
	}
}

.review-images {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.review-img {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease;
	
	&:hover {
		transform: scale(1.05);
	}
}

// 推荐商品样式
.recommend-section {
	background: #FFFFFF;
	padding: 20px;
	margin-bottom: 10px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.recommend-title {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	
	.title-text {
		font-size: 18px;
		font-weight: 600;
		color: #333333;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			left: -8px;
			top: 50%;
			transform: translateY(-50%);
			width: 4px;
			height: 16px;
			background: linear-gradient(135deg, #4FACFE, #00F2FE);
			border-radius: 2px;
		}
	}
}

.recommend-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	row-gap: 16px;
}

.recommend-item {
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	
	&:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 24px rgba(79, 172, 254, 0.15);
		border-color: #4FACFE;
		background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 100%);
	}
	
	&:active {
		transform: translateY(-1px);
		transition: transform 0.1s ease;
	}
}

.recommend-image-wrapper {
	position: relative;
	width: 100%;
	height: 100px;
	overflow: hidden;
	background: linear-gradient(45deg, #F1F5F9, #E2E8F0);
	border-bottom: 1px solid #E5E7EB;
	transition: transform 0.3s ease;
	
	/* 悬停效果 */
	.recommend-item:hover & {
		transform: scale(1.08);
	}
	
	/* 添加微妙的蒙版效果 */
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.05) 100%);
		pointer-events: none;
		z-index: 1;
	}
}

.recommend-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
}



.recommend-info {
	padding: 12px 12px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.8) 100%);
	border-top: 1px solid rgba(229, 231, 235, 0.5);
}

.recommend-name {
	font-size: 13px;
	color: #374151;
	line-height: 1.4;
	height: 2.8em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-weight: 500;
	margin-bottom: 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.recommend-price {
	font-size: 16px;
	color: #DC2626;
	font-weight: 700;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	text-shadow: 0 1px 2px rgba(220, 38, 38, 0.1);
	
	&::before {
		content: '¥';
		font-size: 14px;
		margin-right: 2px;
		font-weight: 600;
	}
}

// 删除原有的商品详情部分
// .detail-content {
// 	min-height: 200px;
// }

// 商品详情样式
.product-details {
	background: #FFFFFF;
	padding: 15px 20px;
	margin-bottom: 0;
}

.detail-content {
	min-height: 100px;
}

.detail-images {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.detail-image {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.detail-placeholder {
	font-size: 14px;
	color: #999999;
	text-align: center;
	padding: 40px 0;
	display: block;
}

.bottom-safe-area {
	background: transparent;
}

.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFFFFF;
	border-top: 1px solid #F0F0F0;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 1000;
}

.action-left {
	display: flex;
	gap: 15px;
}

.favorite-btn,
.cart-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px;
	
	.btn-icon {
		font-size: 20px;
		margin-bottom: 2px;
	}
	
	.btn-text {
		font-size: 12px;
		color: #666666;
		display: block; /* 确保文本显示 */
		width: 100%; /* 设置宽度 */
		text-align: center; /* 居中文本 */
		overflow: visible; /* 确保文本不被裁剪 */
	}
}

.favorite-btn {
	.btn-icon {
		color: #999999;
	}
	
	&.favorited .btn-icon {
		color: #ff4757;
	}
}

.add-cart-btn {
	flex: 1;
	height: 45px;
	background: #4FACFE;
	border: none;
	border-radius: 22px;
	margin-left: 20px;
	
	.btn-text {
		font-size: 16px;
		color: #FFFFFF;
		font-weight: 500;
	}
}

// 参数选择弹窗样式
.param-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 2000;
	display: flex;
	align-items: flex-end;
	backdrop-filter: blur(4px);
}

.param-modal {
	width: 100%;
	max-height: 75vh;
	background: #FFFFFF;
	border-radius: 24px 24px 0 0;
	display: flex;
	flex-direction: column;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15), 0 -4px 16px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #e5e7eb;
	background: #fafbfc;
	border-radius: 20px 20px 0 0;
}

.modal-title {
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
}

.modal-close {
	font-size: 20px;
	color: #6b7280;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 8px;
	transition: all 0.2s ease;

	&:hover {
		background: #f3f4f6;
		color: #374151;
	}
}

.modal-content {
	flex: 1;
	padding: 8px 24px 24px 24px;
	overflow-y: auto;
	background: #ffffff;
	position: relative;
	
	&::-webkit-scrollbar {
		width: 6px;
	}
	
	&::-webkit-scrollbar-track {
		background: #f1f5f9;
		border-radius: 3px;
	}
	
	&::-webkit-scrollbar-thumb {
		background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
		border-radius: 3px;
		
		&:hover {
			background: linear-gradient(135deg, #3b9df8 0%, #00d4e6 100%);
		}
	}
}

.debug-info {
	padding: 20px;
	text-align: center;
	color: #999999;
}

.debug-text {
	font-size: 14px;
	color: #999999;
}

.param-group {
	margin-bottom: 30px;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.param-group-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.group-label {
	font-size: 16px;
	color: #333333;
	font-weight: 500;
}

.group-value {
	font-size: 14px;
	color: #666666;
}

.param-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.param-option {
	padding: 10px 20px;
	border: 1px solid #E0E0E0;
	border-radius: 20px;
	background: #FFFFFF;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&.selected {
		background: #4FACFE;
		border-color: #4FACFE;
		
		.option-text {
			color: #FFFFFF;
		}
	}
	
	&:hover {
		border-color: #4FACFE;
	}
}

.option-text {
	font-size: 14px;
	color: #333333;
	transition: color 0.3s ease;
}

.modal-footer {
	padding: 20px;
	border-top: 1px solid #e5e7eb;
	background: #fafbfc;
}

.confirm-btn {
	width: 100%;
	height: 48px;
	background: linear-gradient(135deg, #4FACFE 0%, #00F2FE 100%);
	color: #FFFFFF;
	border: none;
	border-radius: 24px;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4px 16px rgba(79, 172, 254, 0.3);

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
	}

	&:active {
		transform: translateY(0);
	}

	&.disabled {
		background: #e5e7eb;
		color: #9ca3af;
		box-shadow: none;
		cursor: not-allowed;
		transform: none;
	}
}

// 购物车按钮容器
.cart-buttons {
	display: flex;
	gap: 12px;
	width: 100%;
}

.cart-btn {
	flex: 1;
	height: 48px;
	border: none;
	border-radius: 24px;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;

	&:active {
		transform: scale(0.98);
	}

	&.disabled {
		background: #e5e7eb !important;
		color: #9ca3af !important;
		box-shadow: none !important;
		cursor: not-allowed;
		transform: none !important;
	}
}

.personal-cart-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);

	&:hover:not(.disabled) {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
	}
}

.ship-cart-btn {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 16px rgba(240, 147, 251, 0.3);

	&:hover:not(.disabled) {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
	}
}

// 参数详情样式
.param-detail-section {
	padding: 16px 0;
}

.param-detail-item {
	margin-bottom: 0;
	background: #f8f9fc;
	border-radius: 8px;
	margin-bottom: 8px;
	transition: all 0.2s ease;

	&:last-child {
		margin-bottom: 0;
	}

	&:hover {
		background: #f0f2f7;
		transform: translateX(4px);
	}
}

.param-detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	border-bottom: none;
}

.param-detail-label {
	font-size: 15px;
	color: #374151;
	font-weight: 500;
}

.param-detail-value {
	font-size: 15px;
	color: #1f2937;
	font-weight: 600;
}

// 规格选择样式
.spec-selection-section {
	padding: 20px 0;
}

.spec-group {
	margin-bottom: 32px;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.spec-group-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #e5e7eb;
}

.spec-group-name {
	font-size: 16px;
	color: #1f2937;
	font-weight: 600;
}

.spec-group-selected {
	font-size: 14px;
	color: #4FACFE;
	font-weight: 500;
}

.spec-options-container {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0 4px;
}

.spec-option-item {
	position: relative;
	padding: 8px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 60px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

	&:hover {
		border-color: #4FACFE;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	&.selected {
		border-color: #4FACFE;
		background: #4FACFE;
		color: #ffffff;

		.option-name {
			color: #ffffff;
			font-weight: 600;
		}
		
		.option-price {
			color: #ffffff;
			opacity: 0.9;
		}
	}

	&.out-of-stock {
		background: #f9fafb;
		border-color: #e5e7eb;
		cursor: not-allowed;
		opacity: 0.5;
		
		&:hover {
			border-color: #e5e7eb;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
		}
		
		.option-name {
			color: #9ca3af;
			text-decoration: line-through;
		}
		
		.option-price {
			color: #9ca3af;
			text-decoration: line-through;
		}
	}
}

.option-content {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: nowrap;
}

.option-name {
	font-size: 14px;
	color: #374151;
	font-weight: 500;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.option-price {
	font-size: 12px;
	color: #4FACFE;
	font-weight: 600;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.stock-tip {
	position: absolute;
	top: -6px;
	right: -6px;
	font-size: 10px;
	color: #ffffff;
	background: #ef4444;
	padding: 2px 6px;
	border-radius: 8px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
	z-index: 2;
}

.option-check {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	background: #10b981;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

// 船舶选择弹窗样式
.ship-list {
	padding: 15px 0;
	max-height: 450px;
	overflow-y: auto;
}

// 公司选项样式
.company-option {
	margin-bottom: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
}

.company-header {
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
	
	&:hover {
		background: #f3f4f6;
	}
}

.company-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.company-name {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
}

.company-ships-count {
	font-size: 12px;
	color: #666666;
}

.company-toggle {
	font-size: 16px;
	color: #4FACFE;
}

// 船舶容器
.ships-container {
	padding: 8px 16px;
	background: #ffffff;
}

// 船舶选项样式
.ship-option {
	padding: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	margin: 8px 0;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	background: #ffffff;
	
	&:hover {
		border-color: #4FACFE;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(79, 172, 254, 0.1);
	}
	
	&.active {
		border-color: #4FACFE;
		background: rgba(79, 172, 254, 0.05);
		box-shadow: 0 4px 12px rgba(79, 172, 254, 0.15);
	}
}

.ship-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ship-name {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
}

.ship-imo {
	font-size: 12px;
	color: #666666;
}

.ship-check {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 16px;
	color: #4FACFE;
	font-weight: bold;
}

// 无船舶提示
.no-ships-message {
	padding: 16px;
	text-align: center;
	color: #9ca3af;
	font-size: 14px;
}

// 移除添加新船舶按钮样式

.no-ship-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	text-align: center;
}

.no-ship-icon {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.6;
}

.no-ship-text {
	font-size: 16px;
	color: #374151;
	margin-bottom: 8px;
	font-weight: 500;
}

.no-ship-desc {
	font-size: 14px;
	color: #9ca3af;
}

.check-icon {
	font-size: 12px;
	color: #ffffff;
	font-weight: bold;
}

// 主页面规格显示样式
.spec-section {
	padding: 16px 20px;
	background: #ffffff;
	border-bottom: 1px solid #f3f4f6;
}

.spec-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.spec-label {
	font-size: 16px;
	color: #1f2937;
	font-weight: 600;
}

.spec-selected-container {
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 4px 0;

	&:hover {
		.spec-arrow {
			color: #495057;
			transform: translateX(2px);
		}
	}

	&:active {
		transform: scale(0.98);
	}
}

.selected-specs {
	position: relative;
	max-width: 200px;
	margin-right: 8px;
	padding: 4px 8px;
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;

	&:hover {
		background: #e9ecef;
		border-color: #6c757d;
		
		.specs-tooltip {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}
}

.specs-text {
	font-size: 14px;
	color: #495057;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.specs-more {
	font-size: 11px;
	color: #6c757d;
	font-weight: 400;
	background: #dee2e6;
	padding: 1px 4px;
	border-radius: 3px;
	white-space: nowrap;
}

.specs-tooltip {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	padding: 8px 10px;
	background: #343a40;
	color: #ffffff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: all 0.2s ease;
	white-space: nowrap;
	pointer-events: none;
	
	&::before {
		content: '';
		position: absolute;
		top: -4px;
		left: 12px;
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-bottom: 4px solid #343a40;
	}
}

.tooltip-text {
	font-size: 13px;
	color: #ffffff;
	font-weight: 400;
	line-height: 1.3;
}

.spec-placeholder {
	font-size: 14px;
	color: #4FACFE;
	margin-right: 8px;
}

.spec-arrow {
	font-size: 14px;
	color: #9ca3af;
	transition: all 0.2s ease;
}

.no-specs-message {
	text-align: center;
	padding: 48px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.no-specs-icon {
	font-size: 48px;
	margin-bottom: 8px;
	opacity: 0.6;
}

.no-specs-text {
	font-size: 16px;
	color: #374151;
	font-weight: 500;
}

.no-specs-desc {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.4;
}

// 售后保障选择样式
.after-sale-selection-section {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 15px 0;
	max-height: 450px;
	overflow-y: auto;
}

.after-sale-option {
	border: 2px solid #e5e7eb;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 12px;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	background: #ffffff;
	max-width: 100%;
	width: 98%;
	box-sizing: border-box;
	
	&:hover {
		border-color: #4FACFE;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(79, 172, 254, 0.1);
	}
	
	&.selected {
		border-color: #4FACFE;
		background: rgba(79, 172, 254, 0.05);
		box-shadow: 0 4px 12px rgba(79, 172, 254, 0.15);
	}
}

.option-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.option-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	width: 100%;
}

.option-name {
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
	flex: 1;
	text-align: left;
	margin-right: 12px;
	line-height: 1.4;
	max-width: calc(100% - 40px);
	word-wrap: break-word;
}

.option-check {
	width: 22px;
	height: 22px;
	border: 2px solid #d1d5db;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	flex-shrink: 0;
	
	&.checked {
		border-color: #4FACFE;
		background: #4FACFE;
	}
}

.check-icon {
	font-size: 12px;
	color: white;
	font-weight: bold;
	line-height: 1;
}

.option-description {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.4;
	display: block;
	text-align: left;
	margin-top: 0;
	padding-right: 25px;
	word-wrap: break-word;
	max-width: 100%;
}

.no-options-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	text-align: center;
}

.no-options-icon {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.6;
}

.no-options-text {
	font-size: 16px;
	color: #374151;
	margin-bottom: 8px;
	font-weight: 500;
}

.no-options-desc {
	font-size: 14px;
	color: #9ca3af;
}
.spec-arrow {
	margin-left: 10rpx;
	color: #007AFF;
	font-size: 28rpx;
}
</style>